<template>
    <div class="main flex">
        <div class="left">
            <custom-head bold text="选择机房" class="mt15">
                <div>
                    共<span class="primary-color">{{ selecData.length }}</span>个机房
                </div>
            </custom-head>
            <el-form :model="form" :rules="rules" ref="form" label-width="52px" class="form mt15">
                <el-form-item label="机房" prop="name">
                    <el-select size="mini" v-model="form.selectValue" @change="getRoomInfo(form.selectValue)"
                        placeholder="请选择机房" style="width: 100%;">
                        <el-option :label="item.title" :value="item.resourceId" v-for="item in selecData" />
                    </el-select>
                </el-form-item>
            </el-form>
            <custom-head bold text="选择待分配项" class="mt15">
                <div>
                    共<span class="primary-color">{{ selecData.length }}</span>个机房
                </div>
            </custom-head>
            <el-row class="mt15" type="flex" justify="space-between">
                <el-input size="mini" clearable v-model="form.proName" @input="search" placeholder="请输入项目名称"></el-input>
                <el-input size="mini" style="margin: 0 10px;" @input="search" clearable v-model="form.hostName"
                    placeholder="请输入申请单名称"></el-input>
            </el-row>
            <el-row class="mt15" type="flex" justify="space-between">
                <el-input size="mini" @input="search" clearable v-model="form.assetName" placeholder="请输入资产名"></el-input>
            </el-row>
            <div class="list-wrap">
                <template v-for="item in assetList">
                    <drag :transfer-data="{ example: 'drag-html', data: item }" :draggable="selectAsset.id == item.id">
                        <div slot="image" class="drag-image">
                            <div class="flex-ac drag-content">
                                <img width="12" height="12" :src="getImgSrc(3, item.assetType)" alt="">
                                <div> {{ item.hostName }} </div>
                            </div>
                        </div>
                        <div :class="{ 'block': true, 'active': selectAsset.id == item.id }" @click="chooseAsset(item)">
                            <div>主机名：<span>{{ item.hostName }}</span></div>
                            <div>
                                类型：<span>{{ item.assetTypeName }}</span> <span style="margin-left: 10px;">
                                    {{ item.assetU }} U</span>
                            </div>
                        </div>
                    </drag>
                </template>
            </div>
        </div>
        <div class="right">
            <!-- 选择U位 -->
            <div v-show="selectCabinet.resourceId" style="height: 100%;">
                <div class="title flex-jsb">
                    <custom-head bold text="选择U位"></custom-head>
                    <div>
                        <el-button size="mini" @click="cancel" style="margin-right: 10px;">取消</el-button>
                        <el-button size="mini" type="primary" @click="handleOk">确定</el-button>
                    </div>
                </div>
                <div class="warp">
                    <!-- :cabinetInfo="cabinetInfo" -->
                    <cabinet-componts ref="cabinetRef" isDrag :cabinetList="cabinetList"
                        :cabinetIdList="roomInfo.cabinetList" @loadData="loadData" />
                </div>
            </div>
            <!-- 选择机柜 -->
            <div v-show="!selectCabinet.resourceId">
                <custom-head bold text="可分配机柜" class="bottom-line"></custom-head>
                <div class="warp">
                    <div v-for="(array, index) in showCabinetList">
                        <div class="flex-ac">
                            <div class="column">第{{ index + 1 }}排</div>
                            <div v-for="item in array" @click="chooseCabinet(item)">
                                <div :class="{ 'block': true, 'flex-center': true, 'active': item.isCanPlaced }">
                                    <div> {{ item.resourceName }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getMachineRoom, getAssetList, getAllocationList, getMachineRoomInfo, getDetailList, asseAllocation } from "@/api/computerRoomApi.js";
import CabinetComponts from "@/components/cabinetComponts/index.vue"
import customHead from "@/components/head/index.vue"
import imgSrc from "@/utils/imgSrc";

export default {
    components: {
        CabinetComponts,
        customHead,
    },
    data() {
        return {
            selecData: [],
            form: {
                selectValue: "",//下拉选中
                // resourceName: "",//资源名
                hostName: "",//主机名
                assetName: "",//资产名
                proName: "",//项目名称
            },
            rules: {
                name: [
                    { required: true, message: "请输入机房名称", trigger: "blur" },
                    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
                ],
            },//
            assetList: [],//待分配的资产列表
            selectAsset: {},//当前选中的资源
            cabinetList: [],//可分配的机柜列表
            selectCabinet: { resourceId: "" },//选中的机柜
            showCabinetList: [],//分配U位的机柜列表
            roomInfo: {},
            timer: 0,
            cabinetInfo: {},
        };
    },
    mounted() {
        // 获取所有机房列表
        getMachineRoom().then(res => {
            if (res.code == "200") {
                this.selecData = res.info;
                this.form.selectValue = this.selecData[0].resourceId;
                // 机房详情
                this.getRoomInfo(this.form.selectValue)
                // 
                this.getAssetList()
                return
            }
            this.message(res.msg, 3);

        });
    },
    methods: {
        handleOk() {
            let assets = [];
            this.$refs.cabinetRef.dropAssets.map((item) => {
                console.log(item, "-----");
                assets.push({
                    assetId: item.id,
                    directResourceId: item.resourceNum,
                    directResourceName: item.resourceName,
                    heightU: item.assetU,
                    roomId: this.form.selectValue,
                    seatId: '',
                    seatType: item.assetType,
                    startU: item.startU
                })
            })

            this.asseAllocation(assets)
        },
        getImgSrc(type, id) {
            return imgSrc(type, id)
        },
        cancel() {
            if (this.$refs.cabinetRef.dropAssets.length) {
                this.$confirm('当前数据未保存, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs.cabinetRef.dropAssets = []
                    this.selectCabinet = { resourceId: "" }
                }).catch(() => {
                });
                return
            }
            this.selectCabinet = { resourceId: "" }

        },
        getRoomInfo(id) {
            // 获取机房详情
            getMachineRoomInfo({ resourceId: id }).then(res => {
                if (res.code == "200") {
                    this.roomInfo = res.info;
                    return
                }
                this.message(res.msg, 3)
            });
        },
        // 
        chooseAsset(data) {
            this.selectAsset = data;
            this.getAllocationList();
        },
        search(inputV) {
            console.log(inputV);
            if (this.timer) {
                clearTimeout(this.timer)
            }

            this.timer = setTimeout(() => {
                this.getAssetList(this.form)
            }, 500);
        },
        chooseCabinet(data) {
            if (data.isCanPlaced) {
                this.selectCabinet = data;
                this.loadData({ id: data.resourceId }, true)
                return
            }
            this.message("当前机柜不能分配设备", 3)
        },

        // 加载机柜
        loadData({ id, type }, isFirst = false) {
            getDetailList({ assetU: this.selectAsset.assetU, directResourceId: id, roomId: this.form.selectValue, type }).then(res => {
                if (res.code == "200") {
                    if (isFirst) {
                        // 首次进入默认选中中间
                        this.cabinetInfo = res.info && res.info.length ? res.info[1] : {};
                    }
                    this.cabinetList = [...res.info];
                    if (type == 2) {
                        this.cabinetList.unshift([])
                    } else {
                        this.cabinetList.push([])
                    }
                    return
                }
            })
        },

        //  机位分配
        asseAllocation(asset) {
            asseAllocation(asset).then(res => {
                if (res.code == "200") {
                    this.$message("确认成功");
                    this.selectCabinet = { resourceId: "" };
                    this.getAssetList()
                }
            })
        },

        // 获取待分配的资源列表
        getAssetList(param) {
            getAssetList({
                roomId: this.form.selectValue,
                ...param
            }).then(res => {
                if (res.code == "200") {
                    if (res.info && res.info.length) {
                        this.selectAsset = res.info[0];
                        this.getAllocationList()
                        this.assetList = res.info
                    }
                }
            })
        },
        // 
        getAllocationList() {
            getAllocationList({
                roomId: this.form.selectValue,
                assetType: this.selectAsset.assetType,
                assetU: this.selectAsset.assetU,
            }).then(res => {
                if (res.code == "200") {
                    this.showCabinetList = res.info;
                }
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .left {
        width: 20%;
        height: 100%;
        padding: 16px;
        overflow: auto;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
        border-radius: 10px;
        background-color: #fff;

        .list-wrap {
            overflow: auto;
            height: 70%;

            .drag-content {
                background: #21B795;
                width: 188px;
                // height: 16px;
                padding: 0px 5px;
                border-radius: 2px;
                color: #fff;
                font-size: 12px;
            }

            .block {
                border: 1px solid #E6E6E6;
                border-radius: 8px;
                padding: 15px 10px;
                font-size: 14px;
                color: #666;
                margin-top: 10px;

                span {
                    color: #333;
                }

                &.active {
                    background: #D3F1EA;
                    border: 1px #21B795;
                    border-style: dashed;
                    box-shadow: 1px 2px 6px 0px rgba(0, 157, 133, 0.3);
                    cursor: pointer;
                }
            }
        }

    }

    .right {
        flex: 1;
        padding: 16px;
        margin-left: 16px;
        overflow-x: hidden;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
        border-radius: 10px;
        background-color: #fff;

        .bottom-line {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                width: 103%;
                height: 1px;
                background: #F0F0F0;
                left: -15px;
                bottom: -5px;
            }
        }

        .title {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                width: 103%;
                height: 1px;
                left: -15px;
                bottom: -10px;
                background: #F0F0F0;
            }
        }

        .warp {
            overflow: auto;
            height: 90%;
            margin-top: 20px;

            .column {
                width: 60px;
                text-align: left;
                flex-shrink: 0;
            }

            .block {
                width: 88px;
                height: 116px;
                border: 1px solid #DCDCDC;
                border-radius: 4px;
                box-sizing: border-box;
                margin: 0 8px 15px 0;
                cursor: pointer;
                font-size: 12px;
                color: #666;
                text-align: center;
                &.active {
                    border-color: #21B795;
                }
            }

        }

    }

}
</style>
  
  